const path=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const copyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');

// 以下是自己定义的插件
const FileListPlugin = require('./webpack-plugin/test.js');

let resolve = (dir) => {
    return path.join(__dirname, '..', dir);
};
const ENV = require('minimist')(process.argv.slice(2)).env;

let addplugins = () => {
    let plugin = [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: './index.html',
            chunks:['index']
        }),
        new HtmlWebpackPlugin({
            template: './testwebpack/index.html',
            filename: './testwebpack/index.html',
            chunks:['testwebpack']
        }),
        
        new MiniCssExtractPlugin({
            filename: "css/[name]-[hash].css",//所有抽离出的样式文件，放进dist下的css目录
            chunkFilename: "css/[name]-[hash].css"
        }),
        new CleanWebpackPlugin()
    ];
    if (ENV=== 'production') {
        // 本地也加 消耗内存
        plugin.push(new copyWebpackPlugin([{
            from: './*.worker.js',// 打包的静态资源目录地址
            to:'./' // 打包到dist下面的static
        },{
            from: './*.php',// 打包的静态资源目录地址
            to:'./' // 打包到dist下面的static
        },{
            from: './*.txt',// 打包的静态资源目录地址
            to:'./' // 打包到dist下面的static
        },{
            from: './*.conf',// 打包的静态资源目录地址
            to:'./' // 打包到dist下面的static
        }]));

        // 以下是自己定义的插件
        plugin = plugin.concat([
            new FileListPlugin({
                path: './abc.js'
            })
        ]);
    }

    return plugin;
}

let devtool = ENV=== 'production' ? '' : 'source-map';
module.exports={
    //配置入口
    entry: {
        index: path.join(__dirname,'src/main.ts'),
        testwebpack: path.join(__dirname,'testwebpack/src/main.ts'),
    },
    output:{//配置打包出口文件
        filename: '[name].[chunkhash].min.js',
        path:path.join(__dirname,'dist'),
        chunkFilename:'js/[name]-[chunkhash:8].js'
    },
    devtool,
    devServer: {
        
    },
    resolve: {
        extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],
        alias: {
          '@': resolve('src')
        }
    },
    optimization: {
        splitChunks: {
            minSize: 30000,
            minChunks: 1,
            cacheGroups: {
                vendor: {
                  chunks: "initial",
                  test: path.resolve(__dirname, "node_modules"), // 路径在 node_modules 目录下的都作为公共部分
                  name: "static", // 使用 vendor 入口作为公共部分
                  enforce: true,
                },
            },
        },
      },
    module:{
        rules:[
            {
                test:/.vue$/,
                loader:'vue-loader'
            },
            {
                test: /\.(png|jpe?g|gif|bmp|webp|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            outputPath: 'images',
                            esModule: false,
                            name: '[name].[hash:5].[ext]',
                            limit: 500
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    ENV=== 'production'? {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            esModule: false,
                            publicPath: '../',
                        },
                    }:'style-loader',
                    'css-loader',
                    {
                        loader: './webpack-loader/test-css-loader.js',
                        options: {
                            path: 'abc'
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    ENV === 'production'? {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            esModule: false,
                            publicPath: '../',
                        },
                    }:'vue-style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader',
                    {
                        loader: "ts-loader",
                        options: { appendTsxSuffixTo: [/\.vue$/] }
                    },
                    // {
                    //     loader: 'tslint-loader'
                    // }
                ]
            },
            {
                test: /\.tt$/,
                exclude: /node_modules/,
                loader:'./webpack-loader/tt-js-loader',
                options: {
                    outputPath: 'testLoader',
                }
            }
        ]
    },
    plugins: addplugins(),
}